import type { Graph } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";

const ports = {
  groups: {
    top: {
      position: "top",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    },
    right: {
      position: "right",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    },
    bottom: {
      position: "bottom",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    },
    left: {
      position: "left",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    }
  },
  items: [
    {
      group: "top"
    },
    {
      group: "right"
    },
    {
      group: "bottom"
    },
    {
      group: "left"
    }
  ]
};

function setupBasic(graph: Graph, stencil: Stencil) {
  const tools = [
    {
      name: "node-editor",
      args: {
        attrs: {
          backgroundColor: "#EFF4FF"
        }
      }
    }
  ];

  const rect = graph.createNode({
    shape: "rect",
    width: 100,
    height: 40,
    ports: { ...ports },
    label: "rect",
    tools: tools
  });

  const ellipse = graph.createNode({
    shape: "ellipse",
    width: 100,
    height: 40,
    label: "ellipse",
    ports: { ...ports },
    tools: tools
  });

  const circle = graph.createNode({
    shape: "circle",
    width: 60,
    height: 60,
    label: "circle",
    ports: { ...ports },
    tools: tools
  });

  const polygon = graph.createNode({
    shape: "polygon",
    width: 80,
    height: 80,
    label: "polygon",
    attrs: {
      body: {
        // fill: '#efdbff',
        // stroke: '#9254de',
        // 指定 refPoints 属性，多边形顶点随图形大小自动缩放
        // https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
        refPoints: "0,10 10,0 20,10 10,20"
      }
    },
    ports: { ...ports },
    tools: tools
  });

  const text = graph.createNode({
    shape: "text",
    width: 60,
    height: 60,
    // ports: { ...ports },
    tools: tools
  });

  stencil.load([rect, ellipse, circle, polygon, text], "基础元素");
}

function setupFramework(graph: Graph, stencil: Stencil) {
  const gateway = graph.createNode({
    shape: "gateway",
    // x: 100,
    // y: 40,
    width: 160,
    height: 64,
    ports: { ...ports },
    attrs: {
      text: {
        text: "nginx"
      }
    },
    tools: [
      {
        name: "node-editor",
        args: {
          attrs: {
            backgroundColor: "#EFF4FF"
          }
        }
      }
    ]
  });
  const service = graph.createNode({
    shape: "service",
    // x: 100,
    // y: 40,
    width: 160,
    height: 64,
    ports: { ...ports },
    // attrs: {
    //   text: {
    //     text: "nginx",
    //   }
    // },
    tools: [
      {
        name: "node-editor",
        args: {
          attrs: {
            backgroundColor: "#EFF4FF"
          }
        }
      }
    ]
  });

  const database = graph.createNode({
    shape: "database",
    // x: 100,
    // y: 40,
    width: 160,
    height: 64,
    ports: { ...ports },
    // attrs: {
    //   text: {
    //     text: "nginx",
    //   }
    // },
    tools: [
      {
        name: "node-editor",
        args: {
          attrs: {
            backgroundColor: "#EFF4FF"
          }
        }
      }
    ]
  });
  const mq = graph.createNode({
    shape: "mq",
    // x: 100,
    // y: 40,
    width: 160,
    height: 64,
    ports: { ...ports },
    // attrs: {
    //   text: {
    //     text: "nginx",
    //   }
    // },
    tools: [
      {
        name: "node-editor",
        args: {
          attrs: {
            backgroundColor: "#EFF4FF"
          }
        }
      }
    ]
  });
  const stream = graph.createNode({
    shape: "stream",
    // x: 100,
    // y: 40,
    width: 160,
    height: 64,
    ports: { ...ports },
    // attrs: {
    //   text: {
    //     text: "nginx",
    //   }
    // },
    tools: [
      {
        name: "node-editor",
        args: {
          attrs: {
            backgroundColor: "#EFF4FF"
          }
        }
      }
    ]
  });
  const cache = graph.createNode({
    shape: "cache",
    // x: 100,
    // y: 40,
    width: 160,
    height: 64,
    ports: { ...ports },
    // attrs: {
    //   text: {
    //     text: "nginx",
    //   }
    // },
    tools: [
      {
        name: "node-editor",
        args: {
          attrs: {
            backgroundColor: "#EFF4FF"
          }
        }
      }
    ]
  });
  stencil.load([gateway, service, database, mq, stream, cache], "架构元素");
}

export function setupStencli(graph: Graph, container: HTMLElement) {
  const stencil = new Stencil({
    title: "拓扑编辑器",
    target: graph,
    stencilGraphHeight: 0,
    stencilGraphWidth: 400,
    collapsable: true,
    groups: [
      {
        name: "基础元素"
      },
      {
        name: "架构元素"
      }
    ]
  });
  // 需要一个容纳 stencil 的 Dom 容器 stencilContainer
  container!.appendChild(stencil.container);

  setupBasic(graph, stencil);
  setupFramework(graph, stencil);

  return stencil;
}
